<template>
  <div class="authorize-root">
    <van-nav-bar title="API授权" left-arrow @click-left="$router.goBack()" />

    <div v-if="!hasAuthorize">
      <div class="tips-box flex">
        <div>
          <div class="row">1.获取到货币的API Key;用于同步持仓和交易数据</div>
          <div class="row">2.输入或者复制粘贴你的API Key</div>
        </div>
      </div>

      <div class="input-box">
        <div class="title">API Key</div>
        <van-field v-model="access_key" placeholder="请输入API Key" />
      </div>

      <div class="input-box">
        <div class="title">Secret Key</div>
        <van-field v-model="secret_key" placeholder="请输入 Secret Key" />
      </div>

      <div class="btn-box" @click="keyBind">导入</div>
    </div>

    <div style="height: 100%" v-if="hasAuthorize">
      
			<van-list 
			>
				<div class="card flex-btw" v-for="(item, index) in list" :key="index">
					<div class="icon flex">
						<van-image
							width="40"
							height="40"
							:src="require('@/assets/images/authorize/huobi.jpg')"
						/>
						<span>火币</span>
					</div>
					<van-icon name="ellipsis" size="20" @click="show = true" />
				</div>
			</van-list>
      
    </div>

    <!-- 弹出层 -->
    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
			@select="onSelect"
    />
  </div>
</template>

<script>
	import mixin from "@/mixin.js";
	import { Toast } from "vant";
	import { BIND_KEY,LIST_KEY,DEL_KEY } from "@/api/api.js";
export default {
  data() {
    return {
      value: '',
      // 是否已经授权
      hasAuthorize: true,
      list: [],
      // 弹框内容
      show: false,
			access_key:'',
			secret_key:'',
      actions: [{ name: '从服务器删除',type:1}, { name: '重置' ,type:2}],
    };
  },
	mounted() {
	  this.getList();
	},
  methods: {
    onCancel(){
			
		},
		onSelect(item) {
			switch(item.type) {
				case 1:
					this.delKey();
					break;
				case 2:
					this.hasAuthorize = false;
					break;
			}
		},
		async delKey() {
			const { data } = await this.$reqPost(DEL_KEY);			
			if (data.status == 1) {
				Toast('删除成功!');
				this.hasAuthorize = false;
			} 
		},
		async getList() {
		  const { data } = await this.$reqGet(LIST_KEY, {
		    platform: 1,
		  });
		  
		  if (data.status == 1) {
		    this.list = data.data.list;
				if(this.list.length >0) {
					this.hasAuthorize = true;
				} else {
					this.hasAuthorize = false;
				}
		  } 
		},
		async keyBind() {
			const { data } = await this.$reqPost(BIND_KEY, {
			  platform: 1,
				access_key:this.access_key,
				secret_key:this.secret_key,
			});
			if (data.status == 1) {
				Toast('绑定成功!');
				this.hasAuthorize = true;
				this.$router.push({ name: "RouterView" });
			}else{
				Toast(data.info);
			} 
			
		}	
		
 
  },
};
</script>

<style lang="scss" scoped>
.authorize-root {
  .tips-box {
    background-color: #eeeeee;
    height: 1.32rem;
    .row {
      padding: 0 0.3rem;
      font-size: 0.2rem;
      color: #919191;
      text-align: left;

      &:nth-child(1) {
        margin-bottom: 0.1rem;
      }
    }
  }

  .input-box {
    margin: 0 0.3rem;
    border-bottom: 0.02rem solid #f0eeee;
    .title {
      font-size: 0.26rem;
      color: #141414;
      text-align: left;
      margin-top: 0.45rem;
      margin-bottom: 0.2rem;
    }
  }

  .btn-box {
    width: 5.06rem;
    height: 0.8rem;
    font-size: 0.3rem;
    text-align: center;
    line-height: 0.8rem;
    color: #fff;
    background-color: #2d7afe;
    border-radius: 0.1rem;
    margin: 0.78rem auto 0;
  }

  .card {
    padding: 0.3rem 0.3rem;
    border-bottom: 0.01rem solid #f5f5f5;
    .icon {
      span {
        font-size: 0.24rem;
        margin-left: 0.2rem;
      }
    }
  }
}
</style>
